section {
	background-color: $ui-bg-color;
	border: 1px solid $ui-border-color;

	.section-head {
		display: flex;
		height: 32px;
		line-height: 32px;

		h4 {
			padding: 0 10px;
			margin-right: auto;
			overflow: hidden;
			text-overflow: ellipsis;
			font-weight: bold;
			line-height: inherit;
			color: lighten($font-color, 15%);
		}

		.toggle {
			max-height: 24px;

			padding: 0 5px 0 10px;
			border: none;
			background-color: transparent;

			&::before {
				margin-right: 8px;
				color: $btn-icon-color;
			}

			&:hover {
				&::before {
					color: $btn-icon-hover-color;
				}
			}

			&:active,
			&:focus {
				&::before {
					color: $btn-icon-focus-color;
				}
			}

			h4 {
				padding: 0;
				font-weight: normal;
				color: $font-color;
			}
		}
	}

	.section-foot {
		padding: 0 10px;
		text-align: right;
		line-height: 32px;
		color: $font-alt-color;
	}

	&.collapsed {
		.section-body,
		.section-foot {
			display: none !important;
		}
	}

	&:not(:last-child) {
		margin-bottom: 10px;
	}

	.list-table {
		border: 0;

		tbody tr:last-child {
			td {
				border-bottom: 1px solid $table-border-color;
			}
		}

		td,
		th {
			&:first-child {
				padding-left: 10px;
			}

			&:last-child {
				padding-right: 10px;
			}
		}

		&.no-data {
			tbody tr:last-child {
				td {
					border-bottom: none;
				}
			}
		}
	}
}
